<template>
  <div class="archives">
    <div class="left">
      <section class="_1r_Dp71aY9wU_PZOrRyGzl">
        <div class="_31uY1VinxiwKyG_XZXFpv">
          <!-- 归档头部 -->
          <div class="_1tJ6zWK6o_q8KafBWysrmZ">
            <p><span>归档</span></p>
            <p>
              共计 <span>{{ archivesList.length }}</span> 篇
            </p>
          </div>
          <div class="GIf9xHwpzxlxHcDyE8sCn">
            <h2>2021</h2>
            <!-- 每一标题项 -->
            <div class="_172XrbegThYDU7WfEHTUpM">
              <h3>November</h3>
              <ul>
                <li
                  @click="getDetail(item)"
                  style="opacity: 1; height: 48px; transform: none"
                  v-for="(item, index) in archivesList"
                  :key="index"
                >
                  <a aria-label="使用 TS 类型实现自然数加减乘除"
                    ><span class="OTAyqb_MWljCg91UnBG5u"
                      ><time datetime="11-01">11-01</time></span
                    ><span class="JxUmPoeJKqnfS58GvD3vz">{{ item.title }}</span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>
    </div>
    <div class="right">
      <div
        class="recommend"
        v-if="recommendFlag"
        :style="{ marginTop: i + 'px' }"
      ></div>
      <RightLayout :articleList="archivesList.slice(0, 6)" />
      <ClassifyArticles />
      <Footer />
    </div>
    <BackTop />
  </div>
</template>

<script>
import RightLayout from "@/components/RightLayout";
import BackTop from "@/components/BackTop";
import ClassifyArticles from "@/components/ClassifyArticles";
import Footer from "@/components/RightBotm";
import { mapState, mapActions, mapMutations } from "vuex";
export default {
  components: {
    RightLayout,
    ClassifyArticles,
    BackTop,
    Footer,
  },
  computed: {
    ...mapState({
      archivesList: (state) => state.archives.archivesList,
      articleList: (state) => state.article.articleList,
    }),
  },
  data() {
    return {
      recommendFlag: false,
      i: 0,
    };
  },
  mounted() {
    console.log(this.$route);
    // 滚动事件
    window.addEventListener("scroll", this.headleScroll, true);
  },
  methods: {
    ...mapActions({
      getArchivesList: "archives/getArchivesList",
    }),
    ...mapMutations({
      update: "archives/update",
    }),
    getDetail(item) {
      this.$router.push(`/archives/detail/${item.id}`);
      //事件埋点 统计点击事件量
      window._hmt.push(["_trackEvent", "文章", "查看详情", "文章id", item.id]);
    },

    headleScroll() {
      let scroll =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      if (scroll > this.i || scroll === 0) {
        this.i = scroll;
        this.recommendFlag = false;
        console.log(1, scroll, this.i);
      } else {
        console.log(2, scroll, this.i);
        this.i = scroll;
        this.recommendFlag = true;
      }
    },
  },
  created() {
    this.getArchivesList();
  },
};
</script>

<style scoped lang="scss">
._1tJ6zWK6o_q8KafBWysrmZ {
  padding: 16px 0;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--bg-second);
  text-align: center;
}
p:nth-child(1) {
  margin-top: 0.5rem;
  color: var(--primary-color);
  font-size: 1.5rem;
}
p:nth-child(2) {
  margin-top: 0.5rem;
  font-size: 1.1rem;
}
p:nth-child(2) span {
  color: var(--primary-color);
  font-size: 1.1rem;
}
.GIf9xHwpzxlxHcDyE8sCn {
  padding: 1rem 1.3rem;
}
h2 {
  color: var(--main-text-color);
  font-size: 1.5rem;
}
._172XrbegThYDU7WfEHTUpM {
  padding: 0.5rem 1rem;
  border-radius: 4px;
}
h3 {
  font-size: 18px;
  color: var(--second-text-color);
}
._172XrbegThYDU7WfEHTUpM ul {
  padding-left: 2.5rem;
}
._172XrbegThYDU7WfEHTUpM ul li {
  opacity: 1;
  height: 48px;
  transform: none;
  position: relative;
  padding: 0.5rem 0;
  line-height: 48px;
  list-style: block;
}
._172XrbegThYDU7WfEHTUpM ul li:hover {
  .OTAyqb_MWljCg91UnBG5u {
    color: var(--primary-color);
  }
  .JxUmPoeJKqnfS58GvD3vz {
    color: var(--primary-color);
  }
}
ul li span {
  padding-right: 1em;
  margin: 0;
  color: var(--second-text-color);
  font-size: 0.8rem;
}
ul li a span:nth-child(1) {
  font-size: 16px;
}
ul li a span:nth-child(2) {
  font-size: 20px;
  color: #000;
}
.right .right-classify {
  border-radius: var(--border-radius);
  margin-bottom: 1.3rem;
  background-color: var(--bg-second);
  box-shadow: var(--box-shadow);
  line-height: 1.29;
  overflow: hidden;
}
.right .right-classify ._2b0LQ_j7dN-JQtnGkqmrDz {
  padding: 1rem 1.3rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--main-text-color);
  font-weight: 700;
}
.right .right-classify ul {
  padding: 1rem;
}
.right .right-classify ul li {
  padding: 8px 7px;
  border-radius: var(--border-radius);
  color: var(--second-text-color);
  line-height: 1.5em;
  transition: all 0.2s ease-in-out;
}
.right .right-classify ul li a:hover {
  span {
    color: var(--primary-color);
  }
  span {
    color: var(--primary-color);
  }
}
.right .right-classify ul li a span:nth-child(2) {
  font-size: 16px;
}
</style>
